<template>
 <div class="myInfo">
            
                 <header :style="{color: Color}"> 
      <Icon type="md-ribbon"></Icon>当前位置: <router-link style="cursor:pointer" tag="span" to="/">首页</router-link> >联系我们
      </header>
      <div>
        <div class='homepage'>
      <div class="content">
          
          <p>{{sign}}</p>
          
      </div>
          </div>
      </div>
      <div id="aa">
<h2>联系我们</h2>
<div id="bb">
  <td>
        <input type="text" style="float:left" v-model="message" placeholder="姓名">
<p>{{ message }}</p>
<input style="float:left"  v-model="phone" placeholder="电话">
<p> {{ phone }}</p>
<input type="text" style="float:left" v-model="email" placeholder="Email">
<p> {{ email }}</p>
  </td>
</div>
<span></span>
<p style="white-space: pre-line;">{{ content }}</p>
<br>
<textarea name="content" rows="18" cols="180" onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5" v-model="content" placeholder="内容"></textarea>
        </div>
        <div id="zz">
        <el-main>
        <!-- <router-link to="demo">跳转至demo页面</router-link> -->
<i class="iconfont">&#xe609;Phone</i>
<p>0553-1826520285</p>
        <!-- <router-link to="./">返回至HelloWorld页面</router-link> -->
        <i class="iconfont">&#xe6c4;Hour</i><p>上班时间：周一至周五/10:am-6:00pm</p>
        <i class="iconfont">&#xe61f;Address</i><p>上海市XX区XX路XX大厦</p>
       
      </el-main>
        </div>
 <div id="app">
    <div
      id="allmap"
      ref="allmap"
    ></div>
    <router-view></router-view>
  </div>

 </div>
</template>

<script>

  export default {

    name:'profile',
    props:{
 
          },


    
    
    data:function() {
return {
message:'',
phone:'',
email:'',
content:'',

    
    }
   
    },
      methods: {
    map () {
      let map = new window.BMap.Map(this.$refs.allmap) // 创建Map实例
      map.centerAndZoom(new window.BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
      map.addControl(new window.BMap.MapTypeControl({ // 添加地图类型控件
        mapTypes: [
          window.BMAP_NORMAL_MAP,
          window.BMAP_HYBRID_MAP
        ]
      }))
      map.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true)// 开启鼠标滚轮缩放
    }

  },
  mounted () {
    this.map()
  }
  }
  

</script>
<style lang="scss" scoped>
td{
  white-space: nowrap;
}
input{
  display:table-row;
  
}
#bb{
  display: inline-block;
  background: grey;

}
 .homepage{
    height: 550px;
    background: url(../assets/images/people.jpg) no-repeat;
    background-size: 100% 120%;
    color: #fff;
    font-size: 28px;
    margin-top: 5px;
    animation: bg infinite 100s linear alternate;
  }
  @keyframes bg {
    0% {background-size: 110% 130%; }
    10% {background-size: 111% 131%; }
    20% {background-size: 112% 132%; background-position: bottom;}
    30% {background-size: 113% 133%; }
    40% {background-size: 114% 134%;}
    50% {background-size: 115% 135%;background-position: left;}
    60% {background-size: 116% 136%;}
    70% {background-size: 117% 137%;}
    80% {background-size: 118% 138%;background-position: right;}
    90% {background-size: 119% 139%;}
    100% {background-size: 120% 140%;}
  }
  .content{
    display: inline-block;
    position: relative;
    // top: 40%;
  }
  p{
    text-shadow: 0px 0px 10px rgba(255,255,255,0.5);
    letter-spacing: 10px;
  }
  .box{
    display: inline-block;
    width: 100px;
    height: 20px;
  }
  #box1{
    border-left:8px solid;
    border-top: 8px solid;
    position: relative;
    right: 150px;
    bottom: 20px;
  }
  #box2{
    border-top: 8px solid;
    border-right: 8px solid;
    position: relative;
    left: 150px;
    bottom: 20px;
  }
   #box3{
    border-left: 8px solid;
    border-bottom: 8px solid;
    position: relative;
    right: 150px;
    top: 20px;
  }
   #box4{
    border-right: 8px solid;
    border-bottom: 8px solid;
    position: relative;
    left: 150px;
    top: 20px;
  }
.aboutus .grid-content.line{
    border-right: 1px solid #ddd;
    height: 150px;
  }
  .aboutus .el-card__header{
    background: #545c64;
  }
  .aboutus .el-card__body{
    padding: 50px 20px;
  }
  .aboutus .el-timeline-item__wrapper{
    top: -8px;
  }
  .aboutus .title p .el-tag{
    margin: 0px 5px;
    cursor: pointer;
  }
</style>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#allmap {
  width:800px;
  height: 500px;
  overflow: hidden;
}
 el-main{
        display: flex;
        justify-content: space-around;
        padding:60px;
      }
      #zz p{
         width:100%;
            display:inline-block;
            justify-content: space-around;
            height:50px;

            border-bottom:1px solid #a7a6a6;
      }
    @font-face {
  font-family: 'iconfont';  /* Project id 2563202 */
  src: url('//at.alicdn.com/t/font_2563202_objx10t0gmc.woff2?t=1621616589531') format('woff2'),
       url('//at.alicdn.com/t/font_2563202_objx10t0gmc.woff?t=1621616589531') format('woff'),
       url('//at.alicdn.com/t/font_2563202_objx10t0gmc.ttf?t=1621616589531') format('truetype');
}
  .iconfont{
    font-family:"iconfont" !important;
    font-size:30px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 1px;
    -moz-osx-font-smoothing: grayscale;}
</style>

